<template>
    <div>
        <p>我是子组件</p>
        <p>son : {{ count }}</p>
        <ul>
            <li v-for="item in footableArr1" :key="item.id">{{ item.name }}</li>
        </ul>
        <button @click="$emit('myevent', userObj)">子传父-方式1</button>
        <button @click="emitFn">子传父-方式2</button>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
// 接收props 为count的变量
// 写法1: 数组形式
// const props = defineProps(['count', 'footableArr1']);
// 写法2: 对象形式
const props = defineProps({
    count: {
        type: Number,  // 类型
        default: 100  // 默认值
    },
    footableArr1: Array  // 类型
})
console.log('props', props);

// 子传父
// 方式1: 直接在行内写$emit
const userObj = reactive({
    name: '水庆霞',
    age: 50
})

// 方式2:  使用defineEmits宏来声明自定义事件
const userObj1 = reactive({
    name: '李铁',
    age: 50
});

// 语法: const emit = defineEmits(['自定义事件',....多个事件]);
const emit = defineEmits(['myevent1']);
// console.log('emit', emit); 
const emitFn = () => {
    emit('myevent1', userObj1);
}





</script>
<style scoped></style>